<template>
	<view class="container">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 成功提示 -->
			<view class="success-message">
				<image class="success-icon" src="https://shoujizulin3.hzrjkf.com/static/wxpng/submit.png" mode="aspectFit"></image>
				<text class="success-text">订单创建成功</text>
			</view>

			<!-- 扫码提示 -->
			<text class="scan-tip">支付宝或微信扫码下单</text>

			<!-- 二维码区域 -->
			<view class="qrcode-container">
				<image class="qrcode"
					:src="redirectUrl"
					mode="aspectFit"></image>
			</view>

			<!-- 租金信息 -->
			<view class="price-info">
				<view class="price-item">
					<text>首期租金：</text>
					<text class="price">￥{{numprice}}</text>
				</view>
				<view class="price-item">
					<text>总租金</text>
					<text class="price">¥{{totalRental}}</text>
				</view>
				<view class="price-item">
					<text>总押金</text>
					<text class="price">¥{{deposit}}</text>
				</view>
			</view>
			<!-- 保存按钮 -->
			<button class=""
				style="color: #fff; margin-top: 20rpx; border-radius: 80rpx; width: 400rpx; height: 80rpx; text-align: center; line-height: 80rpx; background: #5BC5BB;"
				@getAuthorize="downloadAndSave" open-type="getAuthorize" scope="phoneNumber" onError="handleAuthError">
				保存二维码到相册
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				redirectUrl:"",
				numprice:"",
				deposit:"",
				totalRental:"",
			}
		},
		onLoad(options) {
		  if (options.redirectUrl) {
		    this.redirectUrl = decodeURIComponent(options.redirectUrl);
			this.numprice = options.numprice;
			this.deposit = options.deposit;
			this.totalRental = options.totalRental;
		  }
		},
		methods: {
			downloadAndSave() {
				return
				uni.downloadFile({
					url: this.redirectUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							this.saveImage(res.tempFilePath);
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f8f8;
	}



	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.content {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.success-message {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.success-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 10px;
	}

	.success-text {
		font-size: 16px;
		color: #5BC5BB;
		font-weight: bold;
	}

	.scan-tip {
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
	}

	.qrcode-container {
		width: 200px;
		height: 200px;
		background-color: #fff;
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 30px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.qrcode {
		width: 100%;
		height: 100%;
	}

	.price-info {
		width: 100%;
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.price {
		font-weight: bold;
		color: #e74c3c;
	}

	.credit-tip {
		text-align: right;
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.save-btn {
		width: 80%;
		background-color: #07c160;
		color: #fff;
		border-radius: 20px;
		margin-top: 20px;
	}
</style>